<template>
	<div class="source">
		<pageHeader :active="3" :bgColor="'#292c4d'"></pageHeader>
		<div class="page-content">
			<div class="mt70 add-source">
				<div class="source-img pr" @mouseenter="show = true" @mouseleave="show = false">
					<img src="../../assets/images/addService.png" alt="" width="100%" />
					<div class="describe">技术中心接入</div>
					<div class="modal" v-show="show">
						<div class="join-btn">
							<p class="cfff f16 mb20">
								技术中心用于支撑业务落地，并保障系统高可用性，从而有效应对高频海量业务访问场景。
							</p>
							<!-- <el-button type="primary" size="small">申请使用</el-button> -->
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="card">
					<img src="../../assets/images/basicFrame.png" alt="" class="mr40" width="400px" />
					<div class="pr pb70">
						<div class="f26 bold">基础框架</div>
						<div class="f14 mt30">
							<p class="mt20">
								基础框架是将整个或部分系统的可重用设计，表现为一组抽象构件以及构件实例间交互的方法。另一种定义认为，框架是被应用开发者定制的应用骨架。基础框架的搭建包括编程语言、开发框架、操作系统环境选择等。
							</p>
							<p class="mt20">
								本平台将采用Java作为项目的开发语言。利用Java的容器模式，所有的功能都以构件和服务的形式体现。通过容器来提供对构件的生命周期管理，并通过服务注册库和构件或服务存储库提供服务注册、查找、绑定机制解耦服务或构件之间的依赖关系，从而实现构件或服务的功能实现与生命周期管理分离。
							</p>
							<p class="mt20">
								开发框架将采用Java企业级应用开发框架SpringBoot，SpringMVC以及MyBatis-Plus。
							</p>
						</div>
						<div class="apply" @click="add()">申请使用</div>
					</div>
				</div>
				<div class="card">
					<div class="pr pb70">
						<div class="f26 bold">三维引擎</div>
						<div class="f14 mt30">
							<p class="mt20">
								三维引擎技术是虚拟现实，实时仿真以及交互三维设计等许多重要应用的关键技术。由于三维引擎技术涉及许多算法和专业知识，要快速地开发三维应用程序是有一定困难的，因此三维引擎（三维程序核心）就有很大的意义。三维引擎封装了底层操作，提供程序开发人员一个简易清晰的程序框架，可以极大地提高应用程序开发的效率，将其应用到三维场景漫游程序中，取得了较好的效果。
							</p>
							<p class="mt20">
								本平台中三维引擎主要分为三维可视化平台以及云渲染引擎两个部分。实现模型透明、隐藏、变色、局部剖切、全局剖切、测量等操作，并支持模型特征点、特征线捕捉，实现尺寸、角度测量功能，提供动态提示点坐标和三个轴方向测距功能。
							</p>
							<p class="mt20">
								云渲染引擎主要为web端的应用提供支持。其满足轻客户端、方便的二次开发、高效的渲染引擎、数据安全等要求。
							</p>
						</div>
						<div class="apply apply-left" @click="add()">申请使用</div>
					</div>
					<img src="../../assets/images/3dEngine.jpg" alt="" class="ml40" width="450px" />
				</div>
				<div class="card">
					<img src="../../assets/images/work2.webp" alt="" class="mr40" width="400px" />
					<div class="pr pb70">
						<div class="f26 bold">工作流引擎</div>
						<div class="f14 mt30">
							<p class="mt20">
								工作流引擎是用来开发工作流转的框架。作为应用系统的一部分，能根据角色、分工和条件的不同决定信息传递路由、内容等级等核心解决方案。通过工作流程引擎，我们可以给表单制作一个流转框图，让数据可以按照一定的规则，一定的顺序，提交给一定的负责人进行处理，实现带有时间轴的数据协作，为企业打造智能流转的工作流程，打通企业间各个场景的审批、协作环节，加强团队之间的协作性。
							</p>
							<p class="mt20">
								工作流引擎将遵循BPMN
								2.0规范，能够发布设计好的流程定义，并通过API进行流程调度。将采用模块化和结构化设计，实现节点通知、节点跳转、节点人员配置、节点事件等功能，保证工作流服务的通用性和易维护性。考虑接收站决策机制改变、组织结构变动和由于业务扩展变化产生的全新业务逻辑等情况，具备高效迭代能力，快速响应实际业务流程变化。业务流程按照预先定义的流程执行，整个实现流程完全由工作流引擎进行管理，从而减少业务系统由于流程变更进行系统改造的工作量，从而减少系统开发维护成本，提高系统的健壮性和运行效率。
							</p>
							<p class="mt20">
								工作流引擎的核心类主要分为以下五个部分：RepositoryService类、RuntimeService类、TaskService类、HistoryService类、ManagementService类等。
							</p>
						</div>
						<div class="apply" @click="add()">申请使用</div>
					</div>
				</div>
			</div>
		</div>
		<pageFooter></pageFooter>
		<el-dialog title="申请使用" :visible.sync="dialogFormVisible" :close-on-click-modal="false" class="dialog-box">
			<el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" label-width="80px">

				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"></el-input>
				</el-form-item>

				<el-form-item label="申请内容" prop="content">
					<el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入申请内容"></el-input>
				</el-form-item>

				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
				</el-form-item>

				<el-form-item label="电子邮箱" prop="mail">
					<el-input v-model="form.mail" autocomplete="off" placeholder="请输入电子邮箱"></el-input>
				</el-form-item>

				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="form.phone" autocomplete="off" placeholder="请输入联系方式"></el-input>
				</el-form-item>


			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import pageHeader from "@/components/pageHeader.vue";
	import pageFooter from "@/components/pageFooter.vue";
	import {
		addPwDemandApply,
	} from '@/api/openPlatform' //api接口
	
    import {
    	mapGetters
    } from 'vuex'
	export default {
		name: "OpenPlatform",
		computed: {
			// 获取状态管路设置的值
			...mapGetters([
				'isLogin'
			])
		},
		data() {
			return {
				dialogFormVisible: false,
				form: {
					title: '',
					content: "",
					name: '',
					mail: "",
					phone: '',

				},
				rules: {

					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}, ],
					content: [{
						required: true,
						message: '请输入申请内容',
						trigger: 'blur'
					}, ],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}, ],
					mail: [{
						required: true,
						message: '请输入电子邮箱',
						trigger: 'blur'
					}, ],
					phone: [{
						required: true,
						message: '请输入联系方式',
						trigger: 'blur'
					}, ],

					
				},
				show: false,
			};
		},
		components: {
			pageHeader,
			pageFooter
		},
		methods: {
			
			
			add(index) {
				if(this.isLogin){
					this.dialogFormVisible = true
				}else{
					this.$message({
						message: '请先登录',
						type: 'error'
					})
				}
			},
			

			//添加
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.form)
						addPwDemandApply(this.form).then((response) => {
							console.log(response)
							if (response.code == 0) {
								this.$message({
									message: '申请成功',
									type: 'success'
								})
								this.dialogFormVisible = false
								this.$refs[formName].resetFields();
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

		},
	};
</script>

<style lang="scss" scoped>
	.source {
		margin-top: 70px;

		.page-content {
			min-height: calc(100vh - 177px);
		}

		.add-source {
			background: url("../../assets/images/recourse.png") no-repeat;
			padding-top: 50px;
			background-size: 100% 300px;
			height: 200px;
			overflow: hidden;
			min-width: 1200px;

			.source-img {
				width: 50%;
				margin: 0 auto;
				padding: 15px;
				background: #fff;
				height: 100%;

				.describe {
					position: absolute;
					top: 150px;
					right: 40px;
					font-size: 18px;
					color: #fff;
				}

				.modal {
					position: absolute;
					top: 15px;
					left: 15px;
					bottom: 15px;
					right: 15px;
					background: rgba(51, 51, 51, 0.7);
				}

				.join-btn {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.content {
			text-align: left;

			.card {
				padding: 50px;
				margin: 50px auto;
				width: 1200px;
				background: rgb(242, 247, 251);
				border-radius: 6px;
				display: flex;
				box-sizing: border-box;

				.apply {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 80px;
					text-align: center;
					height: 36px;
					line-height: 36px;
					background: #409eff;
					font-size: 14px;
					color: #fff;
					border-radius: 6px;
					user-select: none;
					cursor: pointer;

					&:active {
						box-shadow: 0 0 3px 0#8ec0f3;
					}
				}

				.apply-left {
					left: 0;
				}
			}
		}

		.dialog-box {
			text-align: left;

			.el-form-item {
				// width: 300px;
				// .el-form-item__content {
				//   width: 100%;
				// }
			}


			.el-select {
				width: 100%;
			}


		}
	}
</style>